<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><meta name="author" content="Longlongyu"><meta name="renderer" content="webkit"><meta name="copyright" content="Longlongyu"><meta name="keywords" content="Longlongyu的个人站"><meta name="description" content="null"><meta name="Cache-Control" content="no-cache"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>对line-height的一些理解 · Mr.Long's Blog</title><link rel="stylesheet" href="/css/style.css?v=2018.7.9"><link rel="stylesheet" href="/css/animation.css?v=2018.7.9"><link rel="icon" href="/img/assets/favicon.ico"><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css?version=1.5.6"><!-- scripts--><script>(function( w ){
  "use strict";
  // rel=preload support test
  if( !w.loadCSS ){
    w.loadCSS = function(){};
  }
  // define on the loadCSS obj
  var rp = loadCSS.relpreload = {};
  // rel=preload feature support test
  // runs once and returns a function for compat purposes
  rp.support = (function(){
    var ret;
    try {
      ret = w.document.createElement( "link" ).relList.supports( "preload" );
    } catch (e) {
      ret = false;
    }
    return function(){
      return ret;
    };
  })();

  // if preload isn't supported, get an asynchronous load by using a non-matching media attribute
  // then change that media back to its intended value on load
  rp.bindMediaToggle = function( link ){
    // remember existing media attr for ultimate state, or default to 'all'
    var finalMedia = link.media || "all";

    function enableStylesheet(){
      link.media = finalMedia;
    }

    // bind load handlers to enable media
    if( link.addEventListener ){
      link.addEventListener( "load", enableStylesheet );
    } else if( link.attachEvent ){
      link.attachEvent( "onload", enableStylesheet );
    }

    // Set rel and non-applicable media type to start an async request
    // note: timeout allows this to happen async to let rendering continue in IE
    setTimeout(function(){
      link.rel = "stylesheet";
      link.media = "only x";
    });
    // also enable media after 3 seconds,
    // which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
    setTimeout( enableStylesheet, 3000 );
  };

  // loop through link elements in DOM
  rp.poly = function(){
    // double check this to prevent external calls from running
    if( rp.support() ){
      return;
    }
    var links = w.document.getElementsByTagName( "link" );
    for( var i = 0; i < links.length; i++ ){
      var link = links[ i ];
      // qualify links to those with rel=preload and as=style attrs
      if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
        // prevent rerunning on link
        link.setAttribute( "data-loadcss", true );
        // bind listeners to toggle media back
        rp.bindMediaToggle( link );
      }
    }
  };

  // if unsupported, run the polyfill
  if( !rp.support() ){
    // run once at least
    rp.poly();

    // rerun poly on an interval until onload
    var run = w.setInterval( rp.poly, 500 );
    if( w.addEventListener ){
      w.addEventListener( "load", function(){
        rp.poly();
        w.clearInterval( run );
      } );
    } else if( w.attachEvent ){
      w.attachEvent( "onload", function(){
        rp.poly();
        w.clearInterval( run );
      } );
    }
  }


  // commonjs
  if( typeof exports !== "undefined" ){
    exports.loadCSS = loadCSS;
  }
  else {
    w.loadCSS = loadCSS;
  }
}( typeof global !== "undefined" ? global : this ) );</script><script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" defer></script><script src="/js/main.js?v=2018.7.9" defer></script><!-- fancybox--><link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js" defer></script><!-- busuanzi--><script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script></head><body><section class="profile-close" id="cxo-profile"><div class="profile-avatar"><i class="fa fa-caret-left"></i><img src="/img/assets/cat.png"></div><!--.profile-saying
  i.fa.fa-comment
  .saying--><div class="cxo-profile-inner"><div class="profile-name">longlongyu</div><div class="profile-signature">for me</div><div class="friends"><div>FRIENDS</div><span><a href="//github.com/Longlongyu" target="_black">friendA</a></span><span><a href="//github.com/Longlongyu" target="_black">friendB</a></span><span><a href="//github.com/Longlongyu" target="_black">friendC</a></span></div><div class="read-progress"></div></div></section><header id="cxo-intro" style="height: 70vh;background-image: url(/img/intro/index-bg.png);"><nav id="cxo-intro-nav"><section><div class="intro-nav-title"><a href="/">Mr.Long's Blog</a></div><div class="intro-nav-label-box"><a href="/">Home</a><a href="/about/">About</a><a href="/archives/">Archives</a><a href="/tags/">Tags</a></div><i class="fa fa-bars intro-nav-menu"><div class="intro-nav-drop"><a href="/">Home</a><a href="/about/">About</a><a href="/archives/">Archives</a><a href="/tags/">Tags</a></div></i><div class="clear"></div></section></nav><h1 class="post-title">对line-height的一些理解</h1><div class="post-intros"><div class="post-intro-meta"><span class="post-intro-time"><i class="post-intro-calendar fa fa-edit"></i><span>2018-09-01</span></span><span class="post-intro-tags"><a class="intro-tag fa fa-tag" href="javascript:void(0)" date-tags="learn"> learn</a><a class="intro-tag fa fa-tag" href="javascript:void(0)" date-tags="CSS"> CSS</a><a class="intro-tag fa fa-tag" href="javascript:void(0)" date-tags="line-height"> line-height</a></span></div><div class="post-intro-read"><span> Word count: <span class="post-count">1,095</span> | Reading time: <span class="post-count">4</span>min</span></div></div></header><article class="cxo-up" id="cxo-content-outer"><section id="cxo-content-inner"><article class="article-entry" id="post"><p><strong><em>line-height</em></strong> 顾名思义就是 <strong>行高</strong>，是用来设置行间的距离，她确实是发挥这样着作用，但单单这样的去理解却也太过于粗浅了。</p>
<p>首先，具体先了解一下一些相关的概念。想一想在我们在刚开始学习英语课时，老师在黑板上画了四条线，这四条线是英文字母用来书写时的4根横向的平行线，而 <code>vertical-align</code> 中的 <strong>top</strong> , <strong>middle</strong> , <strong>baseline</strong> , <strong>bottom</strong> 就是基于这样的概念。</p>
<p>接下来我们看看 <strong><em>MDN</em></strong> 对 <strong><em>line-height</em></strong> 的描述，他是这样的：</p>
<blockquote>
<p>The <code>line-height</code> CSS property sets the amount of space used for<br>lines, such as in text. On block-level elements, it specifies<br>the minimum height of line boxes within the element. On non-<br>replaced inline elements, it specifies the height that is used<br>to calculate line box height.</p>
</blockquote>
<p><code>line-height</code> <strong><em>CSS</em></strong> 属性用于设置多行元素的空间量什么的，这些什么的先不考虑。在上面说明中，涉及到两个很重要的概念，<code>line boxes</code> 和 <code>inline boxes</code> 。</p>
<a id="more"></a>
<h1 id="inline-boxes模型"><a href="#inline-boxes模型" class="headerlink" title="inline boxes模型"></a>inline boxes模型</h1><p>我们先说说 <code>inline boxes</code> ，不过在这之前我们的先聊下盒子。说到盒子，我们很容易联想到 <strong>block</strong> 的块级盒子，<strong>inline</strong> 行内盒子，以及两者之间的 <strong>inline-block</strong> 的行内块级盒子。他们的形成也是因为我们使用了所对应的标签，而这些是我们所知很容易了解到的。但请想一想，在这之下是否还有盒子存在呢？例如我们写在盒子中的文字属于盒子吗？属于哪种盒子？</p>
<p>是的，他们属于盒子。我们都知道行级盒子是在同行进行排列的。一行内这些盒子无论大小都是 <code>inline boxes</code> 。由 <strong>inline-block</strong> 和 <strong>inline</strong> 生成的是具名的 <code>inline box</code> ，而文字则是匿名的 <code>inline box</code> 。</p>
<h1 id="line-boxes模型"><a href="#line-boxes模型" class="headerlink" title="line boxes模型"></a>line boxes模型</h1><p>在了解了 <code>inline boxes</code> ，先不着急，先了解 <code>line boxes</code> 。不过 ，<code>line boxes</code> 到底是个啥呢？</p>
<p>简单来说 <code>line box</code> 就是包含一行内若干个 <code>inline boxes</code> 的盒子。而这些 <code>inline boxes</code> 中最高的盒子会撑起 <code>line box</code> 的高度。没有指定高度的块级元素和行内块级元素其高度就是由这些 <code>line boxes</code> 累积堆起来的，而除此之外，<code>line boxes</code> 不具有其他特性。</p>
<h1 id="line-height与line-boxes高度"><a href="#line-height与line-boxes高度" class="headerlink" title="line-height与line boxes高度"></a>line-height与line boxes高度</h1><p>在知道上面的两个概念之后，我们来探讨一些相关的问题。</p>
<p>一个空的 <strong>div</strong> 在没有设置至少大于1像素高度 <strong>height</strong> 值时，他的高度为0。但如果在里面输入一个文字后，<strong>div</strong> 却拥有高度了。可为什么 <strong>div</strong> 里面有文字后就会有高度呢？</p>
<p>可能有人会觉得是因为文字大小关系，文字占据空间，从而使 <strong>div</strong> 拥有了高度。然后事实确是，文字并没有撑开了 <strong>div</strong> 的高度，而是 <code>line-height</code> ！</p>
<iframe scrolling="no" width="100%" height="300" src="//jsfiddle.net/longlongyu/j4m0wu8c/embedded/html,css,result/dark" frameborder="0" allowfullscreen></iframe>
<p>结果是显而易见，是 <code>line-height</code> 撑开了 <strong>div</strong> 的高度。如果你还是感到疑问，还可以看看下面的例子，通过结合上面所说的两个模型更加容易理解。</p>
<iframe scrolling="no" width="100%" height="300" src="//jsfiddle.net/longlongyu/bwjLfovs/39/embedded/html,css,result/dark" frameborder="0" allowfullscreen></iframe>
<h1 id="line-height与img被div包裹产生的空隙"><a href="#line-height与img被div包裹产生的空隙" class="headerlink" title="line-height与img被div包裹产生的空隙"></a>line-height与img被div包裹产生的空隙</h1><p>相信大家在撰写样式的过程中，一定遇到过这个现象，用 <strong>div</strong> 包裹着一张图片， <strong>div</strong> 却并没有将其完美的包裹起来，而是留有一条小小的空隙。那么，为什么发生这种现象呢？</p>
<p>通过上面的概念我们就明白这是为什么了。首先我们知道 <strong>img</strong> 即是行内元素也是可替换元素<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element" title="Replaced Element" target="_blank" rel="noopener">(Replaced Element)</a>，在默认时，文本是按照基线进行对齐的，<strong>img</strong> 在这里是独居一行的 <code>line box</code> ，而 <code>line boxes</code> 通过 <code>line-height</code> 撑起了盒子的高度，同时由于 <strong>img</strong> 是可替换元素，拥有着自己的 <strong>height</strong> ，两者加算，就产生出了空隙。</p>
<p>解决方法也很简单，换一种对齐方式就可以解决这个问题了。<code>line-height: 0</code> 也行，但可能会引发诸多问题。</p>
<h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>本文主要讲述了一些自己对 <code>line-height</code> 和 <code>inline box</code> 模型的理解，对 <code>line-height</code> 的基础的知识并没有进行累述，如果有纰漏之处，欢迎指正。还有兴趣想了解更多相关知识的，可以看看张鑫旭大神的<a href="http://www.cssworld.cn/" target="_blank" rel="noopener">《CSS世界》</a>，里面有更加详细的讲解。</p>
</article><!-- lincense--><div class="license-wrapper"><p> <span>Author:  </span><a href="https://longlongyu.github.io">Longlongyu</a></p><p> <span>Link:  </span><a href="https://longlongyu.github.io/2018/07/23/DeepUnderstandingLineHeight/">https://longlongyu.github.io/2018/07/23/DeepUnderstandingLineHeight/</a></p><p> <span>Copyright:  </span><span>All articles in this blog are licensed under <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/3.0">CC BY-NC-SA 3.0</a> unless stating additionally.</span></p></div><div class="post-paginator"><a class="prevSlogan" href="/2018/07/30/html5Semantic/" title="关于HTML5语义化"><span>< PreviousPost</span><br><span class="prevTitle">关于HTML5语义化</span></a><a class="nextSlogan" href="/2018/07/18/hexoThemeCxo/" title="hexo-theme-Cxo"><span>NextPost ></span><br><span class="nextTitle">hexo-theme-Cxo</span></a><div class="clear"></div></div><div id="comment"><div id="container"></div><link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css"><script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script><script>var gitment = new Gitment({
  id: '对line-height的一些理解',
  owner: 'Longlongyu',
  repo: 'Longlongyu.github.io',
  oauth: {
    client_id: 'b91980745918e1925d19',
    client_secret: '44b9dc4da15490c0ce1a46da16b8133973f86af9',
  },
})
gitment.render('container')</script></div></section></article><footer id="cxo-footer-outer"><div id="cxo-footer-inner"><p class="footer-container"><span>Site by </span><a href="http://hexo.io"><span>Hexo</span></a><span> | theme </span><a href="https://github.com/Longlongyu/hexo-theme-Cxo"><span>Cxo</span></a></p><i class="fa fa-user"> </i><span id="busuanzi_value_site_uv"></span><span> | </span><i class="fa fa-eye"> </i><span id="busuanzi_value_site_pv"></span><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?" + 'a4e8b5d92c2afb6bc6f100c10f1988d3';
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script></div></footer><!-- catelog--><div class="toc-wrapper" style="top: 70vh;"><div class="toc-catalog"><i class="fa fa-list"> </i><span>CATALOG</span></div><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#inline-boxes模型"><span class="toc-number">1.</span> <span class="toc-text">inline boxes模型</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#line-boxes模型"><span class="toc-number">2.</span> <span class="toc-text">line boxes模型</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#line-height与line-boxes高度"><span class="toc-number">3.</span> <span class="toc-text">line-height与line boxes高度</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#line-height与img被div包裹产生的空隙"><span class="toc-number">4.</span> <span class="toc-text">line-height与img被div包裹产生的空隙</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#结语"><span class="toc-number">5.</span> <span class="toc-text">结语</span></a></li></ol></div><!-- top--><i class="fa fa-arrow-up close" id="go-up" aria-hidden="true"></i></body></html>